<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <!-- <ActionBar /> -->
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column v-if="!forSelection" label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" icon="el-icon-view" @click="edit(row)" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog
      :title="title"
      :show.sync="dialogFormVisible"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <EditForm :id="editId" ref="editForm" />
    </FormDialog>
  </div>
</template>

<script>
import TableFilter from './components/tableFilter'
import FormDialog from '@neu/biz-core/components/FormDialog'
import PageableTable from '@neu/biz-core/components/PageableTable'
// import ActionBar from './components/actionBar'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import databind from '@neu/biz-core/mixins/databind'
import { page, update } from '@neu/biz-core/api/notice'
import { formatDate } from '@neu/biz-core/utils/utils'
export default {
  name: 'NoticePage',
  components: {
    TableFilter,
    PageableTable,
    EditForm,
    FormDialog
    // ActionBar
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      title: '',
      noticeType: [
        { value: 'basic', label: '基本通知' },
        { value: 'maintenanceExpire', label: '维保到期' },
        { value: 'assetExpire', label: '资产到期' },
        { value: 'workOrder', label: '工单' },
        { value: 'lifeCircle', label: '生命周期' },
        { value: 'inventory', label: '库存提醒' },
        { value: 'assetLend', label: '资产借出' }
      ],
      r: page,
      insideColumns: [
        { title: '标题', key: 'title' },
        { title: '内容', key: 'content' },
        { title: '状态', key: 'isRead',
          render: (h, params) => {
            const text = params.row.isRead === 'read' ? '已读' : '未读'
            return h('span', [
              h('el-tag', text)
            ])
          }
        },
        { title: '类型', key: 'noticeType', sortable: 'custom',
          render: (h, params) => {
            return h('span', [
              h('el-tag', params.row.noticeType)
            ])
          }
        },
        { title: '日期', key: 'time', sortable: 'custom', render: (h, params) => { return h('span', formatDate(params.row.createTime)) } }
      ],
      dialogFormVisible: false,
      editId: -1
    }
  },
  created() {
    const obj = {
      's_isRead': 'unRead'
    }
    this.filter(obj)
  },
  methods: {
    edit(row) {
      const id = row.id
      // 打开对话框
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = id
      this.title = row.title
      // store存储减1
      if (row.isRead === 'unRead') {
        this.$store.dispatch('notice/minusNotification')
      } else {
        return
      }

      row.isRead = 'read'
      update(id, row).then(res => {
        if (res.status === 'failure') {
          this.$message({
            showClose: false,
            message: '更新状态失败！',
            type: 'error'
          })
        } else {
          this.refresh()
        }
      })
    },
    ok() {
      // // 直接调用表单实例的保存方法
      // this.$refs.editForm.save().then(response => {
      //   if (response === false) return
      //   this.$message({
      //     showClose: true,
      //     message: '操作成功！',
      //     type: 'success'
      //   })
      //   // 调用pageable-table实例的mixin方法refresh()，更新表格
      //   this.refresh()
      //   // 关闭对话框
      //   this.dialogFormVisible = false
      // })
      this.editId = -1
      // this.refresh()
      // this.$refs.editForm.reset()
      this.dialogFormVisible = false
    },
    cancel() {
      this.editId = -1
      // this.refresh()
      // this.$refs.editForm.reset()
      this.dialogFormVisible = false
    }
  }
}
</script>
